<template>
  <el-popover placement="bottom" :width="300" trigger="click">
    <template #reference>
      <el-input v-model="states" style="width: 100%" placeholder="请选择图标" />
    </template>
    <div class="flex items-center w-[100%] flex-wrap">
      <div
        v-for="(e, i) in svgList"
        :key="i"
        class="mx-[8px] mb-[10px] cursor-pointer"
        @click="choose(e.name)"
        :class="{ 'border-[2px] border-[#ccc]': states === e.name }"
      >
        <el-icon :size="32">
          <component :is="e.module" :iconClass="e.name"></component>
        </el-icon>
      </div>
    </div>
  </el-popover>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
const input = ref("");

const svgModules = import.meta.glob("@renderer/assets/svg/*.svg");
const svgList = Object.keys(svgModules).map((key) => ({
  name: key.replace(/^.*\/(\S+)\..*/, "$1"),
  module: "SvgIcon",
}));
const choose = (name: string) => {
  emit("update:modelValue", name);
  // states.value = name;
};
const props = defineProps(["modelValue"]);
const emit = defineEmits(["update:modelValue"]);
const states = computed({
  get: () => props.modelValue,
  // set: (data) => {
  //   emit("update:modelValue", data);
  // },
});
</script>

<style scoped lang="scss"></style>
